<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../styles/home.css" />
		<link rel="stylesheet" href="../styles/swiper.min.css" />
		<style>
			.swiper-slide img {
				max-width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!-- 轮播开始 -->
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="../images/lunbo04.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="../images/lunbo01.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="../images/lunbo02.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="../images/lunbo03.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="../images/lunbo04.png" /></a>
					</div>
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="../images/lunbo01.png" /></a>
					</div>
				</div>
			</div>
			<!-- 轮播结束 -->
		</div>
		<!-- 列表开始-->
		<ul class="bgcChange mui-table-view mui-grid-view mui-grid-9">
			<li class="borderChange height80 mui-table-view-cell mui-media mui-col-sm-4">
				<a href="#" class='bgcImg bgcImg01'></a>
				<div class="mui-media-body colorWhite">咖啡话吧</div>
			</li>
			<li class="borderChange height80 mui-table-view-cell mui-media mui-col-sm-4">
				<a href="#" class='bgcImg bgcImg02'></a>
				<div class="mui-media-body colorWhite">咖啡文化</div>
			</li>
			<li class="borderChange height80 mui-table-view-cell mui-media mui-col-sm-4">
				<a href="#" class='bgcImg bgcImg03'></a>
				<div class="mui-media-body colorWhite">咖啡特色</div>
			</li>
		</ul>
		<!-- 列表结束-->
		<!-- 滑动列表开始-->
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="borderChange mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
					<div class="fontSize mui-text-left banner-active mui-media-body">咖啡物语</div>
				</li>
				<li class="borderChange mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
					<div class="mui-text-right mui-media-body">查看全部></div>
				</li>
			</ul>
			<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href=""><img src="../images/banner01.png" alt=""></a>
					<div class='coffee'>COFFEE</div>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../images/banner02.jpg" alt=""></a>
					<div class='coffee'>CAKE</div>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../images/banner03.png" alt=""></a>
					<div class='coffee'>COFFEE</div>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../images/banner04.png" alt=""></a>
					<div class='coffee'>COFFEE</div>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../images/banner05.png" alt=""></a>
					<div class='coffee'>COFFEE</div>
				</div>
			</div>
		</div>
		<!-- 滑动列表结束-->
		<!-- 介绍开始-->
		<div class="mui-content paddingTop">
			<ul class="mui-table-view marginTop">
				<li class="introduce mui-table-view-cell mui-media">
					<img src="../images/coffee1.png" alt="" />
					<div class='mark1 marks'>
						<p>TASTING THE COFFEE</p>
						<a class='mui-icon mui-icon-arrowright iconWhite'></a>
					</div>
				</li>
				<li class="introduce mui-table-view-cell mui-media">
					<img src="../images/coffee3.png" alt="" />
					<div class='marks mark2'>
						<p>COFFEE PRODUCTION</p>
						<a class='mui-icon mui-icon-arrowright iconWhite'></a>
					</div>
				</li>
				<li class="introduce mui-table-view-cell mui-media">
					<img src="../images/coffee0.png" alt="" />
					<div class='marks mark3'>
						<p>HAND-POUR COFFEE</p>
						<a class='mui-icon mui-icon-arrowright iconWhite'></a>
					</div>
				</li>
			</ul>
		</div>
		<!-- 介绍结束-->
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/swiper.min.js"></script>
	<script type="text/javascript">
		mui.init();
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
		});
		
		//图片滑动
		 var swiper = new Swiper('.swiper-container', {
        	slidesPerView: 'auto',
        	paginationClickable: true,
       		spaceBetween: 30
    	});
	</script>

</html>